<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>其他样式操作的属性</title>
    <style type="text/css">
      #box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        padding: 10px;
        border: 10px solid yellow;
      }

      #box2 {
        padding: 100px;
        background-color: #bfa;
      }

      #box4 {
        width: 200px;
        height: 300px;
        background-color: #bfa;
        overflow: auto;
      }

      #box5 {
        width: 450px;
        height: 600px;
        background-color: yellow;
      }
    </style>
    <script type="text/javascript">
      window.onload = function () {
        var box1 = document.getElementById('box1');
        var btn01 = document.getElementById('btn01');
        var box4 = document.getElementById('box4');

        btn01.onclick = function () {
          /*
           * clientWidth
           * clientHeight
           * 	- 这两个属性可以获取元素的可见宽度和高度
           * 	- 这些属性都是不带px的，返回都是一个数字，可以直接进行计算
           * 	- 会获取元素宽度和高度，包括内容区和内边距
           *  - 这些属性都是只读的，不能修改
           */
          //alert(box1.clientWidth);
          //alert(box1.clientHeight);
          //box1.clientHeight = 300;

          /*
           * offsetWidth
           * offsetHeight
           * 	- 获取元素的整个的宽度和高度，包括内容区、内边距和边框
           */
          //alert(box1.offsetWidth);

          /*
           * offsetParent
           * 	- 可以用来获取当前元素的定位父元素
           *  - 会获取到离当前元素最近的开启了定位的祖先元素
           * 		如果所有的祖先元素都没有开启定位，则返回body
           */
          var op = box1.offsetParent;

          //alert(op.id);

          /*
           * offsetLeft
           * 	- 当前元素相对于其定位父元素的水平偏移量
           * offsetTop
           * 	- 当前元素相对于其定位父元素的垂直偏移量
           */

          //alert(box1.offsetLeft);

          /*
           * scrollWidth
           * scrollHeight
           * 	- 可以获取元素整个滚动区域的宽度和高度
           */
          //alert(box4.clientHeight);
          //alert(box4.scrollWidth);

          /*
           * scrollLeft
           * 	- 可以获取水平滚动条滚动的距离
           * scrollTop
           * 	- 可以获取垂直滚动条滚动的距离
           */
          //alert(box4.scrollLeft);
          //alert(box4.scrollTop);

          //alert(box4.clientHeight); // 283

          //当满足scrollHeight - scrollTop == clientHeight
          //说明垂直滚动条滚动到底了

          //当满足scrollWidth - scrollLeft == clientWidth
          //说明水平滚动条滚动到底
          //alert(box4.scrollHeight - box4.scrollTop); // 600
        };
      };
    </script>
  </head>
  <body id="body">
    <button id="btn01">点我一下</button>
    <br /><br />

    <div id="box4">
      <div id="box5"></div>
    </div>

    <br /><br />

    <div id="box3">
      <div id="box2" style="position: relative">
        <div id="box1"></div>
      </div>
    </div>
  </body>
</html>
